<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">証明書写真</div>
		</header>
		<div class="box" v-if="imglist">
			<div v-for="(item, index) in imglist" :key="index" >
				<div v-if="index==0" class="titles">証明書の正面</div>
				<div v-if="index==1" class="titles">証明書の裏面</div>
				<div v-if="index==2" class="titles">ハンドヘルド証明書</div>
				<img class="image" :src="item"   @click="showZoomImage(item,index)"  mode="aspectFit"  :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"/>
			</div>
			<div v-if="isZoomed" class="zoomed-image" @click="hideZoomImage">
			  <img :src="imageSrc" mode="aspectFit" />
			</div>
		</div>
		<div  v-if="imglist.length==0">
			<div class="box_empty">
				<img class="img"   src="/img/empty.png" style="margin: 0 auto;" />
			</div>
			<p class="" style="font-size: 14px;text-align: center;">No Data</p>
		</div>
	</div>
</template>

<script>
	import AJAX from '@/utils/http';
	export default {
		data() {
			return {
				// imglist:["/img/p.png","/src/assets/logo.png","/src/assets/logo.png"],
				imglist:[],
				imageWidth: 100, // 初始宽度
				imageHeight: 100, // 初始高度
				data:[],
				isZoomed:false,
				imageSrc:"",
			};
		},
		created() {
			this.fetchData();
		},
		methods: {
			fetchData() {
				AJAX.post('/index/index', {}, {
					showLoading: false
				}).then(e => {
					this.data = e.data;
					this.imglist = e.data.photo;

				});
			},
			showZoomImage(item,index) {
			  this.imageSrc = item;
			  this.isZoomed = true;
			},
			hideZoomImage() {
			  this.isZoomed = false;
			}
		}
	};
</script>

<style>
	/* .img{
		width: 110px;
		height: 100px;
	} */
	.box_empty{
		display: flex;
		justify-content: space-around;
		padding: 5px;
	}
	.box{
		position: relative;
		padding: 10px;
	}
	
	.image {
	  cursor: zoom-in;
	  display: block;
	  width: 100%;
	  height: 100%;
	  border-radius: 5px;
	}
	.zoomed-image {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  cursor: zoom-out;
	}
	.zoomed-image img {
	  max-width: 100%;
	  max-height: 100%;
	}
	.titles{
		padding: 10px;
		font-size: 18px;
	}
</style>